<template>
  <div>
    <h3>Cart Summary</h3>
    <p>
      Total Items: <span>{{ porps.spxj.length }}</span>
    </p>
    <p>
      Total Price: <span>${{ sum }}</span>
    </p>
    <button class="checkout-btn" @click="infodefu">Checkout</button>
  </div>
</template>

<script setup lang="ts">
import { type Info } from './StuDemo4.vue'
const porps = defineProps<{
  spxj: Info[]
  sum: number
}>()
const emit = defineEmits<{
  (e: 'infodefu'): void
}>()
const infodefu = () => {
  emit('infodefu')
}
</script>

<style lang="scss" scoped>
.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}
</style>
